import React, {FC, useCallback} from 'react';
import {
  View,
  Text,
  Image,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
} from 'react-native';
import MineStore from '../../stores/MineStore';
import Empty from '../../components/Empty';
import icon_no_note from '../../assets/icon_no_note.webp';
import icon_no_collection from '../../assets/icon_no_collection.webp';
import icon_no_favorate from '../../assets/icon_no_favorate.webp';
import {observer} from 'mobx-react';
import Heart from '../../components/Heart';
import {useNavigation} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import {RootStackParamList} from '../../../App';

const {width: SCREEN_WIDTH} = Dimensions.get('window');
const EMPTY_CONFIG = [
  {icon: icon_no_note, tips: '快去发布今日的好心情吧~'},
  {icon: icon_no_collection, tips: '快去收藏你喜欢的作品吧~'},
  {icon: icon_no_favorate, tips: '喜欢点赞的人运气不好太差哦~'},
];
type PropsType = {};
const List: FC<PropsType> = observer(() => {
  const currentList = [
    MineStore.noteList,
    MineStore.collectionList,
    MineStore.favoriteList,
  ][MineStore.tabIndex];
  console.log('currentList:', JSON.stringify(currentList));
  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();

  const onArticlePress = useCallback(
    (id: number) => () => {
      navigation.push('ArticleDetail', {id});
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [],
  );

  if (!currentList?.length) {
    const config = EMPTY_CONFIG[MineStore.tabIndex];
    return <Empty icon={config.icon} tips={config.tips} />;
  }

  return (
    <View style={styles.listContainer}>
      {currentList.map((item, index) => {
        return (
          <TouchableOpacity
            style={styles.item}
            key={`${item.id}-${index}`}
            onPress={onArticlePress(item.id)}>
            <Image source={{uri: item.image}} style={styles.itemImg} />
            <Text style={styles.titleTxt}>{item.title}</Text>
            <View style={styles.nameLayout}>
              <Image source={{uri: item.avatarUrl}} style={styles.avatarImg} />
              <Text style={styles.nameTxt}>{item.userName}</Text>
              <Heart size={20} value={item.isFavorite} />
              <Text style={styles.countTxt}>{item.favoriteCount}</Text>
            </View>
          </TouchableOpacity>
        );
      })}
    </View>
  );
});

const styles = StyleSheet.create({
  listContainer: {
    width: '100%',
    flexDirection: 'row',
    flexWrap: 'wrap',
    backgroundColor: 'white',
  },
  item: {
    width: (SCREEN_WIDTH - 18) / 2,
    marginLeft: 6,
    marginBottom: 6,
    borderRadius: 8,
    overflow: 'hidden',
    marginTop: 8,
  },
  itemImg: {
    width: (SCREEN_WIDTH - 18) / 2,
    height: 240,
  },
  titleTxt: {
    fontSize: 14,
    color: '#333',
    marginVertical: 4,
    marginHorizontal: 10,
  },
  nameLayout: {
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 8,
    marginBottom: 10,
  },
  avatarImg: {
    width: 30,
    height: 30,
    borderRadius: 15,
    resizeMode: 'cover',
  },
  nameTxt: {
    fontSize: 12,
    color: '#666',
    flex: 1,
    marginLeft: 4,
  },

  countTxt: {
    fontSize: 14,
    color: '#666',
    marginLeft: 4,
  },
});
export default List;
